import router, { asyncRoutes } from '@/router'
import store from '@/store'
// 加载进度条
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title'
// 白名单列表
const whiteList = ['/login', '/404']

router.beforeEach(async(to, from, next) => {
  // console.log(to, from)
  // 开启进度条
  NProgress.start()
  const title = getPageTitle(to.meta.title)
  document.title = title
  const token = store.state.user.token
  if (token) {
    // 有token
    if (to.path === '/login') {
      // 已登录 强制跳转到首页
      next('/')
      NProgress.done() // 关闭进度条
      // next('指定跳转的地址') 就不会经过 router.afterEach函数
      // next() 只有放行的时候会经过 router.afterEach函数
    } else {
      // 有token表示登录,跳转到不是login页面的时候需要获取用户信息
      let menus = [] // 接收权限信息
      if (!store.state.user.userInfo.userId) {
        // 判断获取用户信息之前,有没有存储过,避免重复发送请求,增加服务器压力
        menus = await store.dispatch('user/getUserInfo')
        console.log('menus', menus)
        console.log('asyncRoutes', asyncRoutes)
        // 根据权限信息对路由进行过滤然后再渲染左侧菜单和动态添加路由
        const filterRouters = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        // 添加404
        filterRouters.push({ path: '*', redirect: '/404', hidden: true })
        console.log('filterRouters', filterRouters)
        // 把动态路由的路由添加到vuex中
        store.commit('menus/updateMenus', filterRouters)
        // 动态添加动态路由
        // 动态添加路由是异步 如果页面没有加载完成直接跳转页面会出现白屏
        // 解决的办法next({ ...to, replace: true }) // replace:true 重新进入页面重新加载
        router.addRoutes(filterRouters)
        next({ ...to, replace: true })
      } else {
        // 放行
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next() // 放行
    } else {
      // 未登录 强制跳回登录页
      next('/login')
      NProgress.done() // 关闭进度条
    }
  }
})

router.afterEach(() => {
  // 页面跳转完成会经过这里
  NProgress.done() // 关闭进度条
})
